<template>
  <div>
    <v-header title="购物车"></v-header>
    <header id="sc_header">
      <div class="header">
        <div>
          <a href="#">全部(20)</a>
          <div class="underline"></div>
        </div>
        <div>
          <a href="#">降价(4)</a>
          <div class="underline"></div>
        </div>
        <div>
          <a href="#">常卖(2)</a>
          <div class="underline"></div>
        </div>
        <div>
          <a href="#" class="iconfont">分类&#xeb13;</a>
          <div class="underline"></div>
        </div>
      </div>
    </header>
    <!-- 小U自营 -->
    <div id="self_sup">
      <p>
        <span class="isChecked"></span>
        <span class="xiaoU">小U自营</span>
      </p>
      <span class="last">已免运费<a href="#">领券</a></span>
    </div>
    <main id="content">
      <van-empty description="您的购物车空空如也" v-if="!goods.length"/>
      <div class="goods" v-for="(item, index) in goods" :key="item.goodsid">
        <span
          :class="item.isChecked ? 'isChecked active' : 'isChecked'"
          @click="checkedGoods(index)"
        ></span>
        <img :src="'http://localhost:3000' + item.img" alt="" />
        <div class="goods_info">
          <van-icon
            @click="delGoods(item.index, item.id)"
            name="cross"
            style="position: absolute; right: 0"
          />
          <h2 class="textflow">{{ item.goodsname }}</h2>
          <h3 class="textflow">不错的商品</h3>
          <p class="less">比加入时降低￥100</p>
          <p class="pice">
            ￥<strong>{{ item.price }}</strong>
          </p>
          <div class="number">
            <van-icon name="minus" @click="dropNum(index)" />
            <div>{{ item.num }}</div>
            <van-icon name="plus" @click="addNum(index)" />
          </div>
        </div>
      </div>
    </main>
    <footer id="sc_footer">
      <div class="scf_top">
        <div class="scft_left">
          <div>
            <span
              :class="chooseAll ? 'isChecked active' : 'isChecked'"
              @click="checkedAll"
            ></span>
            <span>全选</span>
          </div>
        </div>
        <div class="scft_right">
          <div>
            <h2>合计</h2>
            <p>已免运费</p>
          </div>
          <div>
            <h2>￥{{ totalPrice }}</h2>
            <p>已优惠￥200元</p>
          </div>
          <div @click="goPay">结算</div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { getShopCarList, shopCarEdit, shopCaDel } from "@/request/api.js";
export default {
  data() {
    return {
      total: 0,
      chooseAll: false,
      uid: "",
      goods: [],
      submitGoods: {
        arr: [],
      },
    };
  },
  async created() {
    this.uid = JSON.parse(localStorage.getItem("userInfo")).uid;
    let res = await getShopCarList(this.uid);
    if (res.data.list) {
      res.data.list.forEach((item) => {
        this.goods.push({
          isChecked: false,
          goodsid: item.goodsid,
          goodsname: item.goodsname,
          price: item.price,
          img: item.img,
          id: item.id,
          num: item.num,
        });
      });
    }
  },
  methods: {
    goPay() {
      if (this.total != 0) {
        this.submitGoods.arr = [];
        this.goods.forEach((item) => {
          if (item.isChecked) {
            this.submitGoods.arr.push(item);
          }
        });
        this.$router.push({
          path: "/order",
          query: {
            a:JSON.stringify(this.submitGoods.arr)
          },
        });
      } else {
        this.$toast.fail("请至少选取一件商品");
      }
    },
    delGoods(index, id) {
      Dialog.confirm({
        title: "提示",
        message: "确定要删除吗？？",
      }).then(async () => {
        let res = await shopCaDel(id);
        this.goods.splice(index, 1);
      });
    },
    checkedGoods(index) {
      this.goods[index].isChecked = !this.goods[index].isChecked;
      let isall = this.goods.every(function (item) {
        return item.isChecked == true;
      });
      if (isall) {
        this.chooseAll = true;
      } else {
        this.chooseAll = false;
      }
    },
    async addNum(index) {
      this.goods[index].num += 1;
      let res = await shopCarEdit({
        type: 2,
        id: this.goods[index].id,
      });
    },
    async dropNum(index) {
      if (this.goods[index].num <= 1) {
        return;
      } else {
        this.goods[index].num -= 1;
        let res = await shopCarEdit({
          type: 1,
          id: this.goods[index].id,
        });
      }
    },
    checkedAll() {
      this.chooseAll = !this.chooseAll;
      if (this.chooseAll) {
        this.goods.forEach(function (item) {
          item.isChecked = true;
        });
      } else {
        this.goods.forEach(function (item) {
          item.isChecked = false;
        });
      }
    },
  },
  computed: {
    totalPrice() {
      this.total = 0;
      this.goods.forEach((item) => {
        if (item.isChecked) {
          this.total = this.total + item.num * item.price;
        }
      });
      return this.total;
    },
  },
};
</script>

<style scoped>
.isChecked {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  background: url(./img/default.png) center center no-repeat;
  background-size: 100% 100%;
}

span.active {
  background: url(./img/active.png) center center no-repeat;
  background-size: 100% 100%;
}
#sc_header {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
}
.header {
  padding-left: 0.1rem;
  height: 0.32rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header div:hover .underline {
  visibility: visible;
}
.header div:hover a {
  font-size: 0.16rem;
  color: #ffffff;
  font-weight: 600;
}
.header div .underline {
  visibility: hidden;
}
.header div a {
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #fff3f2;
  text-align: center;
  line-height: 0.16rem;
}
.header div:first-child .underline {
  visibility: visible;
}
.header div:first-child a {
  font-size: 0.16rem;
  color: #ffffff;
  font-weight: 600;
}
.underline {
  box-sizing: border-box;
  width: 0.2rem;
  border-bottom: 0.02rem solid #ffffff;
  margin: 0 auto;
  position: relative;
  border-radius: 0.01rem;
  top: 0.08rem;
}
#self_sup {
  background-color: #fff;
  height: 0.36rem;
  padding: 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#self_sup input {
  background: #ff6040;
}
#self_sup p .xiaoU {
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
  margin-left: 0.08rem;
}
#self_sup .last {
  font-family: PingFangSC-Regular;
  font-size: 0.12rem;
  color: #333333;
  text-align: right;
  line-height: 0.12rem;
}
#self_sup a {
  margin-left: 0.095rem;
  padding-left: 0.095rem;
  font-family: PingFangSC-Regular;
  font-size: 0.12rem;
  color: #ff6040;
  text-align: right;
  line-height: 0.12rem;
  border-left: 0.01rem solid #979797;
}
#content {
  background-color: #fff;
  padding: 0.1rem 0 0.1rem 0.1rem;
  margin-top: 0.1rem;
}
#content .goods {
  position: relative;
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#content .goods img {
  width: 2.16rem;
  width: 1.08rem;
  height: 1.08rem;
}
#content .goods h2 {
  width: 2.16rem;
  font-family: PingFangSC-Regular;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
}
#content .goods h3 {
  width: 2.16rem;
  margin-top: 0.05rem;
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #999999;
  line-height: 0.14rem;
}
#content .goods .choose {
  margin-top: 0.18rem;
  width: 0.9rem;
  height: 0.2rem;
  padding-left: 0.03rem;
  box-sizing: border-box;
  background: #f2f2f2;
  border-radius: 0.01rem;
  font-family: PingFangSC-Regular;
  font-size: 0.1rem;
  color: #333333;
  line-height: 0.2rem;
}
#content .goods .less {
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #ff6040;
  line-height: 0.1rem;
  margin-top: 0.05rem;
}
#content .goods .pice {
  font-family: PingFangSC-Semibold;
  font-size: 0.1rem;
  color: #ff6040;
  line-height: 0.08rem;
  margin-top: 0.15rem;
}
#content .goods .pice strong {
  font-size: 0.2rem;
  font-weight: 700;
}
#content .goods .number {
  width: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 0.1rem;
  bottom: 0;
}
#content .goods .number span {
  font-size: 0.16rem;
}
#content .goods .number div {
  width: 0.4rem;
  height: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
  background: #f2f2f2;
  border-radius: 0.01rem;
}
#sc_footer {
  background-color: #fff;
  height: 1rem;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
}
#sc_footer .scf_top {
  height: 0.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid #ccc;
}
#sc_footer .scf_top .scft_left div {
  height: 0.5rem;
  width: 0.6rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#sc_footer .scf_top .scft_left div span {
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
}
#sc_footer .scf_top .scft_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 2.8rem;
}
#sc_footer .scf_top .scft_right div:nth-child(1) h2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
}
#sc_footer .scf_top .scft_right div:nth-child(1) p {
  margin-top: 0.05rem;
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #999999;
  line-height: 0.1rem;
}
#sc_footer .scf_top .scft_right div:nth-child(2) h2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.2rem;
  color: #ff6040;
  text-align: right;
  line-height: 0.16rem;
}
#sc_footer .scf_top .scft_right div:nth-child(2) p {
  margin-top: 0.05rem;
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #999999;
  line-height: 0.1rem;
}
#sc_footer .scf_top .scft_right div:nth-child(3) {
  width: 1.1rem;
  height: 0.5rem;
  background: #ff6040;
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.5rem;
  font-weight: 600;
}
</style>